﻿@{
    ViewBag.Title = "UploadFiles";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using(@Html.BeginForm("UploadFiles", "Pictures", FormMethod.Post, new { enctype = "multipart/form-data" })){
<div class="row fileupload-buttonbar">
    <div class="span7">
        <div class="well">
            <i class="icon-plus"></i><span>&nbsp;&nbsp;Add files...</span>
            <input type="file" id="fileupload" name="fileupload" accept="image/*" multiple="multiple" />
            <div class="clearfix">
            </div>
            <div class="progress">
                <div class="bar" id="overallbar" style="width: 0%;"></div>
            </div>
        </div>
    </div>
    <div class="span7">
        <div class="well hide" id="filelistholder">
        </div>
    </div>
    <div class="span7">
    </div>
</div>
}

<script type="text/javascript">
    $(function () {
        $('#fileupload').fileupload({
            dataType: "json",
            url: "/Order/UploadManyFilesAction",
            progressInterval: 100,
            add: function (e, data) {
                $('#filelistholder').removeClass('hide');
                data.context = $('<div />').text(data.files[0].name).appendTo('#filelistholder');
                $('</div><div class="progress" style="width:200px; height:10px; border:1px solid blue"><div class="bar" style="width:0%; height:10px; background-color:Blue"></div></div>').appendTo(data.context);
                data.submit();
            },
            done: function (e, data) {
                data.context.text(data.files[0].name + '... Completed');
                $('</div><div class="progress" style="width:200px; height:10px; border:1px solid blue"><div class="bar" style="width:100%;height:10px; background-color:Blue"></div></div>').appendTo(data.context);
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#overallbar').css('width', progress + '%');
            },
            progress: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                data.context.find('.bar').css('width', progress + '%');
            }
        });
    });
</script>